<!--begin box center-->
<div id="box-center">
    <div id="center">
        <div id='div_admin_config_form' align="left" class='div_admin_config_form' style='position:absolute;display:none'>&nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" onClick="openAdminAdv();" title="Config for Advertising Banner"><img src="style/images/icon_config.gif" width="19" height="19" class="displayIn"/></a>
            <div style="display:none; width: 690px; margin-top:0px;margin-left:0;" id="adv_config" class="TA_Nav box_config">
                <input type="hidden" name="id" id="id" value="" />
                <input type="hidden" name="cmd" id="cmd" value="" />
                <input type="hidden" name="hidBlank" id="hidBlank" value="0" />
                <input type="hidden" name="hidIsHome" id="hidIsHome" value="{$isHome}" />
                <div style="border:1px solid #333;padding:10px;">
                    <table>
                        <tr>
                            <td>Ảnh: </td>
                            <td><input type="file" name="img" id="img" value="" class="textInput" /></td>
                            <td rowspan="3" style="padding-left:10px;"><div id="bannerImg"></div></td>
                        </tr>
                        <tr>
                            <td>Tiêu đề: </td>
                            <td><input type="text" name="title" id="title" value="" class="textInput" style="width:200px;" /></td>
                        </tr>
                        <tr>
                            <td>Liên kết: </td>
                            <td><input type="text" name="link" id="link" value="" class="textInput" style="width:200px;" /></td>
                        </tr>
                        <tr>
                            <td colspan="2" valign="top">
                            	Ngày bắt đầu: <input type="text" name="advStartDate" id="advStartDate" value="" class="textInput" style="width:100px;" />
                                <br />
                            	Ngày kết thúc: 
                                <input type="text" name="advEndDate" id="advEndDate" value="" class="textInput" style="width:100px;" />
                                <br />
                                
                                <input type="checkbox" name="blank" id="blank" value="1" style="width:auto;" /> Target Blank
                                <br />
                                
                                <input type="checkbox" name="is_home" id="is_home" value="1" style="width:auto;" /> Hiển thị trên trang chủ 
                                <br />
                                
                                
                            </td>
                            <td>
                             <p>
   								Nhóm danh mục:<br /> {html_options id=zones name=zones[] options=$all_zone style="width:200px;height:120px;" multiple=yes}
                                </p>
                            </td>
                        </tr>
                    </table>
                    <input type="submit" id="banner" name="banner" value="Cập nhật" />
                </div>
                <div style="margin:10px 0;">
                    <h3>Ảnh có sẵn</h3>
                    <table style="width:100%;" bgcolor="#333333" cellpadding="5" cellspacing="1">
                        <tr style="background: #dedede;">
                            <th width="140px">Ảnh</th>
                            <th>Thuộc<br /> trang chủ</th>
                            <th>Tiêu đề</th>
                            <th>Ngày<br />bắt đầu</th>
                            <th>Ngày<br />kết thúc</th>
                            <th>Liên kết</th>
                            <th>Nhóm danh mục</th>
                            <!-- th>In Categories</th -->
                            <th></th>
                        </tr>
	                    {foreach from=$config_items item=items}
                        <tr bgcolor="#FFFFFF">

                            <td>
                                <img src="{$items.img_large}" height="50px" /><br />
                                <input type="hidden" id="hidImg_{$items.id}" name="hidImg_{$items.id}" value="{$items.img_large}" />
                                <input type="hidden" id="hidTitle_{$items.id}" name="hidTitle_{$items.id}" value="{$items.title}" />
                                <input type="hidden" id="hidLink_{$items.id}" name="hidLink_{$items.id}" value="{$items.link}" />
                                <input type="hidden" id="hidZones_{$items.id}" name="hidZones_{$items.id}" value="{$items.zones}" />
                                <input type="hidden" id="hidCatids_{$items.id}" name="hidCatids_{$items.id}" value="{$items.catids}" />
                                <input type="hidden" id="hidBlank_{$items.id}" name="hidBlank_{$items.id}" value="{$items.blank}" />
                                <input type="hidden" id="hidAdvStartDate_{$items.id}" name="hidAdvStartDate_{$items.id}" value="{$items.startDate}" />
                                <input type="hidden" id="hidAdvEndDate_{$items.id}" name="hidAdvEndDate_{$items.id}" value="{$items.endDate}" />

                                <input type="hidden" id="hidIsHome_{$items.id}" name="hidIsHome_{$items.id}" value="{$items.is_home}" />
                            </td>
                            <td><input type="checkbox" {if $items.is_home == 1}checked{/if} disabled /></td>
                            <td><a style="cursor: pointer;" onclick="LoadConfig({$items.id})">{$items.title}</a></td>
                            <td>{$items.startDate}</td>
                            <td>{$items.endDate}</td>
                            <td>{$items.link}</td>
                            <td><span id="inZones_{$items.id}"></span><!-- /td>
								<td>
									<span id="inCats_$items.id}"></span> -->
                                <script type="text/javascript">
                                        var id = {$items.id};
                                        var item_zones = {$json_zone};
                                        var zones = '{$items.zones}';
										
                                        {literal}
                                        if((zones != '')&&(zones != '-1'))
                                        {
                                                arrZone = (zones+'').split(",");
                                                var strContent='';
                                                for(i = 0;i<arrZone;i++)
                                                {
                                                        if((arrZone[i])&&(arrZone[i] != -1))
                                                        {
                                                                if(strContent!='') strContent +=', ';
                                                                strContent += item_zones[arrZone[i]];
                                                        }
                                                }
                                                window.document.getElementById('inZones_' + id).innerHTML = strContent;
                                        }
                                        {/literal}
                                </script>
                            </td>
                            <td nowrap>
                                <a style="cursor: pointer;" onclick="LoadConfig({$items.id})">Sửa</a>&nbsp;|&nbsp;
                                <a style="cursor: pointer;" onclick="return CheckDelete({$items.id});">Xóa</a>
                            </td>
                        </tr>
	                    {/foreach}
                    </table>
                </div>
            </div>
        </div>
        <script>
        {literal}
            var is_home = window.document.getElementById('hidIsHome').value;
            function LoadConfig(id)
            {
				var configOffset = jQuery('#adv_config').offset();
				jQuery('html, body').animate({scrollTop:configOffset.top});
				
                    window.document.getElementById('title').value = window.document.getElementById('hidTitle_' + id).value;
					window.document.getElementById('advStartDate').value = window.document.getElementById('hidAdvStartDate_' + id).value;
			        window.document.getElementById('advEndDate').value = window.document.getElementById('hidAdvEndDate_' + id).value;
                    window.document.getElementById('link').value = window.document.getElementById('hidLink_' + id).value;
	            	
                                    if(window.document.getElementById('hidIsHome_' + id).value == 1)
                    {
                            window.document.getElementById('is_home').checked = true;
                        }
                    else
                    {
                            window.document.getElementById('is_home').checked = false;
                    }
	            	
                                    if(window.document.getElementById('hidBlank_' + id).value == 1)
                    {
                            window.document.getElementById('blank').checked = true;
                        }
                    else
                    {
                            window.document.getElementById('blank').checked = false;
                    }
	            	
                    var zones = window.document.getElementById('zones');
                    var selectedZones = window.document.getElementById('hidZones_' + id).value;
                    if(selectedZones.length)
                    {
                            selectedZones = ',' + selectedZones + ',';
                    }
                    for(i=0;i<zones.options.length;i++)
                    {
                            var option = zones.options[i];
                            if(selectedZones.indexOf(',' + option.value + ',') > -1)
                            {
                                    option.selected = true;
                            }
                            else
                            {
                                    option.selected = false;
                            }
                    }

                            /*var catids = window.document.getElementById('catids');
            			
                            var selectedCatids = window.document.getElementById('hidCatids_' + id).value;
                            if(selectedCatids.length)
                            {
                                    selectedCatids = ',' + selectedCatids + ',';
                            }
                            for(i=0;i<catids.options.length;i++)
                            {
                                    var option = catids.options[i];
                                    if(selectedCatids.indexOf(',' + option.value + ',') > -1)
                                    {
                                            option.selected = true;
                                    }
                                    else
                                    {
                                            option.selected = false;
                                    }
		            		
                            }*/
                    window.document.getElementById('cmd').value = 'edit';
                    window.document.getElementById('id').value = id;
                    window.document.getElementById('bannerImg').innerHTML = '<img src="' + window.document.getElementById('hidImg_' + id).value + '" height="100" />';
                }

                function CheckDelete(id)
                {
                        if(confirm('Are you sure?'))
                        {
                            window.document.getElementById('cmd').value = 'delete';
                            window.document.getElementById('id').value = id;
                            window.document.getElementById('banner').click();
		            	
                                return true;
                            }
                            return false;
                    }
        {/literal}
        </script>
            {if $item_promos}
        <div id="box-adv"></div>
	            {if $isHome == 1}
        <div id="img-other">
            <div id="slide-boder"></div>
        </div>
	            {/if}
        <div id="cate-control">
            <div class="content-control">
                <span id="curImgNotify"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" id="pre_button" class="pre" onclick="promo_focus_prev(1);">&nbsp;
                <input type="button" id="stop_button" class="stop" onclick="promo_focus_stop();">&nbsp;
                <input type="button" id="next_button" class="next" onclick="promo_focus_next(1);">
            </div>
        </div>
        <script>
                    var item_promos = {$item_promos};
                    var cur_pos = 0;
                    var focus_length = {$banner_count};
                    var is_timer = 0;
				
                    {literal}
				
                    for(i in item_promos){
                            if(i == 0){
                                    jQuery("#box-adv").html('<a ' + (item_promos[i]['blank'] == 1 ? 'target="_blank"':'') + ' href="' + item_promos[i]['link'] + '" title="' + item_promos[i]['title'] + '"><img src="' + item_promos[i]['img_large'] + '" class="img_border" width="660" height="240"/></a>');
						
                                    if(is_home == 1)
                                    {
                                            jQuery("#slide-boder").html('<div class="img-select">\
                                                                                                            <div class="arrow"><img src="style/images201005/arrow-slide.gif" with="19" height="10"/></div>\
                                                                                                            <div class="img-selected"><img title="' + item_promos[i]['title'] + '" src="' + item_promos[i]['img_thumb'] + '" height="55"/></div>\
                                                                                              </div>');
                                    }
                                    else if(focus_length > 1)
                                    {
                                            jQuery('#curImgNotify').text(cur_pos + 1 + ' / ' + focus_length);
                                    }
                            }
                            else if(is_home == 1)
                            {
                                            jQuery("#slide-boder").append('<div class="img-default"><div class="none"><img onclick="promo_focus('+i+');" title="' + item_promos[i]['title'] + '" src="' + item_promos[i]['img_thumb'] + '" height="55"/></div></div>');
                            }
                            if((is_home == 1)&&(i == 4)){
                                    break;
                            }
                    }

                    setOpacity();
				
                    function setOpacity()
                    {
                            var obj = jQuery('div[class="none"] img');
                            obj.each(function(){
                                    jQuery(this).addClass('trans90');
                                    jQuery(this).mouseout(function(){
                                            jQuery(this).removeClass('hover');
                                            jQuery(this).addClass('trans90');
                                    });
                                    jQuery(this).mouseover(function(){
                                            jQuery(this).removeClass('trans90');
                                            jQuery(this).addClass('hover');
                                    });
                            });
                    }
				
                    function promo_focus(fstt){
                            if(typeof(item_promos[fstt]) != 'undefined'){
                                    cur_pos = fstt;
                                    jQuery("#slide-boder").html('');
                                    var slide_html = '';
                                    for(i in item_promos){
                                            if(!isNaN(i)){
                                                    if(i == fstt){
								
                                                            jQuery("#box-adv").html('<a ' + (item_promos[i]['blank'] == 1 ?'target="_blank"':'') + ' href="' + item_promos[i]['link'] + '" title="' + item_promos[i]['title'] + '"><img src="' + item_promos[i]['img_large'] + '" class="img_border" width="660" height="240"/></a>');
									
                                                            if(is_home == 1)
                                                            {
                                                                    slide_html+=('<div class="img-select">\
                                                                                                                                    <div class="arrow"><img src="style/images201005/arrow-slide.gif" with="19" height="10"/></div>\
                                                                                                                                    <div class="img-selected"><img title="' + item_promos[i]['title'] + '" src="' + item_promos[i]['img_thumb'] + '" height="55"/></div>\
                                                                                                                      </div>');
                                                            }
                                                            else if(focus_length > 1)
                                                            {
                                                                    jQuery('#curImgNotify').text((cur_pos + 1) + ' / ' + focus_length);
                                                            }
                                                    }
                                                    else if(is_home){
									
                                                            slide_html+=('<div class="img-default"><div class="none"><img onclick="promo_focus('+i+');" title="' + item_promos[i]['title'] + '" src="' + item_promos[i]['img_thumb'] + '" height="55"/></div></div>');
                                                    }
								
                                                    if((is_home == 1)&&(i == 4)){
                                                            break;
                                                    }
                                            }
                                    }
						
                                    if(is_home){
                                            jQuery("#slide-boder").html(slide_html);
                                    }
                                    setOpacity();
                            }
                    }
				
                    function promo_focus_next(stop_timer){
                            if(focus_length > 1)
                            {
                                    jQuery("#pre_button").attr("className","pre").mouseover(function(){jQuery(this).attr("className","preOver")}).mouseout(function(){if(is_timer!=-1){jQuery(this).attr("className","pre")}});
                                    jQuery("#stop_button").attr("className","stop").mouseover(function(){jQuery(this).attr("className","stopOver")}).mouseout(function(){if(is_timer){jQuery(this).attr("className","stop")}});
                                    jQuery("#next_button").attr("className","nextOver").mouseover(function(){}).mouseout(function(){});
                            }
					
                            if(stop_timer){
                                    clearTimeout(pfocus_timer);
                            }
                            cur_pos++;
                            if(cur_pos >= focus_length){
                                    cur_pos = 0;
                            }
					
                            is_timer = 1;
                            promo_focus(cur_pos);
                            pfocus_timer = setTimeout("promo_focus_next();",5000);
                    }
				
                    function promo_focus_prev(stop_timer){
                            if(focus_length > 1)
                            {
                                    jQuery("#pre_button").attr("className","preOver").mouseover(function(){}).mouseout(function(){});
                                    jQuery("#stop_button").attr("className","stop").mouseover(function(){jQuery(this).attr("className","stopOver")}).mouseout(function(){if(is_timer){jQuery(this).attr("className","stop")}});
                                    jQuery("#next_button").attr("className","next").mouseover(function(){jQuery(this).attr("className","nextOver")}).mouseout(function(){if(is_timer!=1){jQuery(this).attr("className","next")}});
                            }
					
                            if(stop_timer){
                                    clearTimeout(pfocus_timer);
                            }
					
                            cur_pos--;
                            if(cur_pos <0){
                                    cur_pos = focus_length - 1;
                            }
					
                            is_timer = -1;
                            promo_focus(cur_pos);
                            pfocus_timer = setTimeout("promo_focus_prev();",5000);
                    }
				
                    function promo_focus_stop(){
                            if(focus_length > 1)
                            {
                                    jQuery("#pre_button").attr("className","pre").mouseover(function(){jQuery(this).attr("className","preOver")}).mouseout(function(){if(is_timer != -1){jQuery(this).attr("className","pre")}});
                                    jQuery("#stop_button").attr("className","stopOver").mouseover(function(){}).mouseout(function(){});
                                    jQuery("#next_button").attr("className","next").mouseover(function(){jQuery(this).attr("className","nextOver")}).mouseout(function(){if(is_timer!=1){jQuery(this).attr("className","next")}});
                            }
					
                            is_timer = 0;
                            clearTimeout(pfocus_timer);
                    }
                    if(focus_length > 1)
                    {
                            jQuery("#next_button").attr("className","nextOver");
                    }
                    jQuery(document).ready(function(){
						jQuery("#advStartDate").datepicker();
						jQuery("#advEndDate").datepicker();
                        pfocus_timer = setTimeout("promo_focus_next();",5000);
                    });
					
					function openAdminAdv()
					{
						if(jQuery('#adv_config').is(':visible'))
						{
							jQuery('#adv_config').hide();
						}
						else
						{
							jQuery('#adv_config').show();
						}
						
					}
                    {/literal}
        </script>
	          {/if}
    </div>
</div>
<!--end box center-->